<template>
    <!-- 使用ElementPlus的上传组件 -->
    <el-upload class="image-uploader" drag :show-file-list="false" :http-request="customUpload"
        :before-upload="beforeUpload" :accept="'image/*'">
        <!-- 自定义触发区域 -->
        <template #trigger>
            <div class="upload-area">
                <!-- 上传图标 -->
                <el-icon :size="40" class="el-icon--upload">
                    <upload-filled />
                </el-icon>
                <!-- 提示文字 -->
                <div class="el-upload__text">
                    将图片拖到此处或 <em>点击上传</em>
                </div>
            </div>
        </template>

        <!-- 预览区域（当有图片时显示） -->
        <template v-if="useUrlStore.getImageUrl" #default>
            <div class="preview-wrapper">
                <!-- 预览图片 -->
                <img :src="useUrlStore.getImageUrl" class="preview-image" alt="预览图片">
                <!-- 遮罩层（鼠标悬停显示删除按钮） -->
                <div class="preview-mask">
                    <span class="preview-actions">
                        <!-- 删除图标 -->
                        <el-icon @click="handleRemove">
                            <Delete />
                        </el-icon>
                    </span>
                </div>
            </div>
        </template>

        <!-- 底部提示文字 -->
        <template #tip>
            <div class="el-upload__tip">
                支持上传 JPG/PNG 格式图片，大小不超过5MB
            </div>
        </template>
    </el-upload>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { UploadFilled, Delete } from '@element-plus/icons-vue'
import { uploadImageApi } from '@/api/upload'
import { useImageUrlStore } from '@/store/imgUrl'

const emit = defineEmits(['upload-success', 'upload-remove'])
const useUrlStore = useImageUrlStore()

// 自定义上传方法
const customUpload = async (options: any) => {
    // 创建FormData对象
    const formData = new FormData()
    // 添加文件到FormData，字段名需要和后端一致
    formData.append('file', options.file)
    try {
        // 调用封装的API方法
        const res = await uploadImageApi(formData)
        useUrlStore.setImageUrl(res.data)
        ElMessage.success(res.msg)
        // 触发上传成功事件
        emit('upload-success', res.data)
    } catch (err) {
        // 触发el-upload的错误回调
        options.onError(err)
    }
    ElMessage.success("图片存入成功")
}

// 上传前校验函数
const beforeUpload = (file: File) => {
    // 类型校验：必须是图片类型
    const isImage = file.type.startsWith('image/')
    if (!isImage) {
        ElMessage.error('只能上传图片文件！')
        return false // 阻止上传
    }

    // 大小校验：不超过5MB
    const isLt5M = file.size / 1024 / 1024 < 5
    if (!isLt5M) {
        ElMessage.error('图片大小不能超过5MB!')
        return false // 阻止上传
    }

    return true // 允许上传
}
// 删除图片处理
const handleRemove = () => {
    useUrlStore.deleteImageUrl() // 清空预览图URL
    // 触发删除事件
    emit('upload-remove')
}
</script>

<style scoped>
.preview-image {
    /* 图片最大高度不超过容器 */
    max-height: 100%;
    /* 图片最大宽度不超过容器 */
    max-width: 100%;
    /* 按比例缩放，保证图片完整显示，不超出盒子 */
    object-fit: contain;

}
</style>